﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <!-- :header-cell-style="getRowClass" -->
  <div id="app">
      <el-container v-if="isreload">
          <el-header style="height: 11.57rem;padding:0;">
              <el-row>
                  <el-col :span='24'><div id="tableheader" style="font-weight:bold;text-align: center;font-size:1rem;line-height: 0.93rem;height: 0.93rem;margin-bottom: 0.625rem;" >诚安时代办公室人员上班统计{{nowdate}}</div></el-col>
                  <el-col :span='8'><div id="container" style="height: 9.325rem;"></div></el-col>
                <el-col :span='8'>
                    <div id="container2" style="height: 9.325rem;"></div></el-col>
              </el-col>
              <el-col :span='8'>
                  <div id="container3" style="height: 9.325rem;"></div></el-col>
            </el-col>
            </el-row>
          </el-header>
          <el-main style="padding:0;margin-top:1.35rem;">
            <el-row><el-col :span="24">
              <div id="eltable">
                <el-row><el-col :span="12">
                  <el-table :data="tableData1" border :cell-style="getcellstyle" style="width:95%;font-size: 8px" :height="height">
                      <el-table-column v-for="(item,index) in header" :label="item[0]" :min-width="item[2]" :key="index" align="center">
                          <template slot-scope="{row}">
                              <div v-html="row[item[1]]"></div>
                          </template>
                      </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="12">
                  <el-table :data="tableData2" border :cell-style="getcellstyle" style="width:95%;font-size: 8px;margin-left:5%;" :height="height">
                    <el-table-column v-for="(item,index) in header" :label="item[0]" :min-width="item[2]" :key="index" align="center">
                        <template slot-scope="{row}">
                            <div v-html="row[item[1]]"></div>
                        </template>
                    </el-table-column>
                </el-table>
              </el-col>
              </el-row>
              </div>
            </el-col>
    </el-row>
          </el-main>
        </el-container>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
          isreload:true,
            visible: false,
            header:[
            ["姓名", "username", 60],
            ["上班打卡", "hr_attend_startWork", 70],
            ["下班打卡", "hr_attend_knockOff", 70],
            ["外出", "field_personnel_total", 140],
            // ["外出内容", "field_personnel_cause", 120],
            ["请假", "isleave", 60]            
            ],
            tableData:[],
            tableData1:[],
            tableData2:[],
            height:window.screen.height-490,
            card_num:0,
            leave_num:0,
            go_out_num:0,
            project_card:[],
            project_sum:[],
            project_name:[]
        }
      },
      computed:{
        nowdate(){
          let now=new Date()
          let year=now.getFullYear()
          let month=now.getMonth()+1
          let day=now.getDate()
          return `${year}-${month}-${day}`
        }
      },
      created(){
        this.getInfo()
        this.getEachProject()
        let that=this
        setInterval(function(){
          
          that.getInfo()
        },300000)
      },
      mounted(){
          this.paly()
      },
      methods:{
        getEachProject(){
          axios.get('http://localhost:8089/each_project').then(res=>{
            console.log(res)
            res.data.data.forEach(item=>{
              this.project_card.push(item.total)
              this.project_name.push(item.construct_project_name.slice(0,4))              
            })
            this.echarts3()
          })
        },
        getcellstyle({row, column, rowIndex, columnIndex}){
              if((row.hr_attend_startWork>'08:31:00'&&column.label=="上班打卡")||(row.hr_attend_knockOff<'18:00:00'&&column.label=="下班打卡")){
                  return "color:red"
              }
              if(row.start_time&&columnIndex==4){
                  return "color:#E6A23C;"
              }
              if(row.field_personnel_place&&columnIndex==3){
                return "color:#800080;"
              }
          },
    paly() {
      setInterval(this.change,2000)//每两秒执行一次插入删除操作
    },
    change(){
        const index=this.go_out_num+this.leave_num
      this.tableData1.push(this.tableData1[index]);//把第一条数据插入数组最有一条
    //   this.tableData1.shift();//删除数组中第一条数据
      this.tableData1.splice(index,1)
      this.tableData2.push(this.tableData2[0])
      this.tableData2.splice(0,1)
    },
    getInfo(){
      this.card_num=0
      this.go_out_num=0
      this.leave_num=0
      axios.get('http://localhost:8089/office_card').then(res=>{//www.ca315189.com:89
        console.log(res)
              this.tableData=res.data.data.map(item=>{
                if(item.hr_attend_startWork){
                  this.card_num++
                }
                if(item.field_personnel_place){
                    this.go_out_num++
                }
                if(item.start_time!=null){
                    this.leave_num++
                }
                  item.status=item.status==1?'在职':item.status==3?'试用期':'实习'
                  item.isleave=item.start_time!=null?'已请假':''
                  item.field_personnel_total=item.field_personnel_place?`<div style="text-align:left;">地点：${item.field_personnel_place}<br/>事由：${item.field_personnel_cause}</div>`:''
                  return item
              })  
              const middle=Math.ceil(this.tableData.length/2)
              this.tableData1=this.tableData.slice(0,middle)
              this.tableData2=this.tableData.slice(middle,this.tableData.length-1)
              this.echarts()
              this.echarts2()
              
          })
    },
    echarts(){
      var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title : {
        text: '打卡统计',
        // subtext: 'tips',
        // x:'center',
        right:'10px',
        textStyle:{
          fontSize:10
        }        
    },
    
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        itemWidth: 12,
        itemHeight: 8,
        textStyle: {
            fontSize: 8
        },
        data: ['打卡人数','未打卡人数']
    },
    
    series : [
        {
            name: '访问来源',
            type: 'pie',
            color:['#34BFA3','#DEDEDE'],
            radius: ['45%', '60%'],
            data:[
                {value:this.card_num, name:'打卡人数'},
                {value:this.tableData.length-this.card_num, name:'未打卡人数'}
            ],
            label: {
                normal: {
                    show: true,
                    formatter: '{b}: {c}({d}%)',
                    position:'outer',
                    textStyle : {
                                    fontWeight : 100 ,
                                    fontSize : 6    //文字的字体大小
                                },
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
    },
    echarts2(){
      var dom2 = document.getElementById("container2");
var myChart2 = echarts.init(dom2);
var app = {};
option = null;
option = {
    title : {
        text: '上班情况',
        // subtext: 'tips',
        // x:'center',
        right:'15px',
        textStyle:{
          fontSize:10
        }   
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
        left: 'left',
        itemWidth: 12,
        itemHeight: 8,
        textStyle: {
            fontSize: 8
        },
        data: ['外勤人数','上班人数','请假人数']
    },
    
    series : [
        {
            name: '访问来源',
            type: 'pie',
            color:['#F45167','#DEDEDE','#E6A23C'],
            radius: ['45%', '60%'],
            data:[
                {value:this.go_out_num, name:'外勤人数'},
                {value:this.card_num, name:'上班人数'},
                {value:this.leave_num, name:'请假人数'}
            ],
            label: {
                normal: {
                    show: true,
                    formatter: '{b}: {c}({d}%)',
                    position:'outer',
                    textStyle : {
                                    fontWeight : 100 ,
                                    fontSize : 6    //文字的字体大小
                                },
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
        }
    ]
};
;
if (option && typeof option === "object") {
  myChart2.setOption(option, true);
}
    },
    echarts3(){
      var dom = document.getElementById("container3");
var myChart = echarts.init(dom);
var app = {};
var option=null
option = {
          title: {
                text: '各项目部总览',
                right:'25px',
                textStyle: {
                fontSize: 10  
                }
            },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        left: '3%',
        right: '10%',
        bottom: '1%',
        top:'20%',
        containLabel: true
    },
    legend: {
      // orient: 'vertical',
      //   left: '',
        itemWidth: 12,
        itemHeight: 8,
        textStyle: {
            fontSize: 8
        },
        data:['打卡人数']
    },
    xAxis: [
        {
            type: 'category',
            data: this.project_name,//['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow',
            },
            axisLabel:{
              interval:0,  
              rotate:20,
              textStyle:{
                  fontSize:8
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '人数',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value}'
            },
            nameTextStyle:{
          fontSize:8
        },   
            splitLine:{
            show:false
          }
        },
    ],
    series: [
    // {
    //         name:'总人数',
    //         type:'bar',
    //         barWidth: '30%',
    //         barGap: '-100%',
    //         data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2,],
    //         itemStyle:{
    //                  normal:{color:"#DEDEDE",barBorderRadius: 7},
    //                  emphasis: {
    //                     barBorderRadius: 7
    //                 }
    //               }
    //     },
        {
            name:'打卡人数',
            type:'bar',
            barWidth: '30%',
            barGap: '-100%',
            data:this.project_card,//[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            itemStyle:{
                     normal:{color:"#716ACB",barBorderRadius: 7,
                     label: {
				          show: true,
				          position: 'top',
				          textStyle: {
				            color: 'black'
              }
                     }},
                     emphasis: {
                        barBorderRadius: 7
                    }
                  }
        },
        
    ]
};
if (option && typeof option === "object") {
  myChart.setOption(option, true);
}
    },
      }
    })
  </script>
  <style>
      .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.el-table__body tr.current-row > td {
  background-color: rgb(252, 233, 199);
}

.el-table--striped .el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
  background-color: #d9ecff !important;
}
// 全局设置
body .el-table td.gutter th.gutter {
  display: table-cell !important;
}
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 1.5rem;
}
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 1.5rem;
}
  html body{
      padding: 0;
      margin:0;
      background: #F5F5F7;
  }
  #container,#tableheader{
    border-radius: 10px;
    padding: 10px;
    background: #fff;
  }
  #container2,#container3{
    margin-left:0.625rem;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
  }
  #eltable{
    margin-top:20px;
    border-radius: 10px;
    padding: 20px;
    background: #fff;
  }
  #app{
    padding: 0.625rem;
  }
  ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  height: 8px;
  -webkit-box-shadow: inset 0 0 1px rgb(7, 115, 223);
  border-radius: 10px;
  background-color: #f5f5f5;
}

//
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  height: 8px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 6px rgb(7, 115, 223);
  background-color: #409EFF;
}
  </style>
</html>
